<template>
  <div>
    <a-card class="card" title="商品审核" :bordered="false">
      <a-form @submit="handleSubmit" :form="form" class="form">
        <a-row class="form-row" :gutter="16">
          <a-col :lg="2" :md="8" :sm="24">
            <a-form-item>
              <a-input
                v-decorator="[ 'activityId',{rules: [{ required: true, message: '请填写活动ID'}]}]"
                placeholder="活动ID"
              />
            </a-form-item>
          </a-col>
          <a-col :lg="4" :md="8" :sm="24">
            <a-form-item>
              <a-input v-decorator="[ 'shopName']" placeholder="店铺名称 选填" />
            </a-form-item>
          </a-col>
          <a-col :lg="3" :md="8" :sm="24">
            <a-form-item>
              <a-input v-decorator="[ 'skuId']" placeholder="商品SKU 选填" />
            </a-form-item>
          </a-col>
          <a-col :lg="2" :md="8" :sm="24">
            <a-form-item>
              <a-button htmlType="submit" type="primary">查找商品</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <a-table
        :columns="auditColumns"
        :rowKey="autidDetailList => autidDetailList.skuId+autidDetailList.endTime+autidDetailList.status"
        :dataSource="autidDetailList"
        :loading="auditLoading"
      >
        <div slot="detailInfo" slot-scope="row">
          <div class="ant-list-item-meta">
            <div class="ant-list-item-meta-avatar">
              <span class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-image">
                <img :src="'https://img14.360buyimg.com/n1/'+row.imageUrl" />
              </span>
            </div>
            <div class="ant-list-item-meta-content">
              <div class="ant-list-item-meta-description">
                <a target="_blank" :href="'//item.jd.com/'+row.skuId+'.html'"> <span class="detail-name">{{ row.skuName }}</span></a>
                <span style="color:#000">￥{{ row.price }}</span>
                <span style="margin-left:20px">{{ row.shopName }}</span>
              </div>
            </div>
          </div>
        </div>
        <div slot="coupon" slot-scope="row">
          <div v-if="row.sendNum">
            ￥{{ row.couponAmount }}
            <br />
            发量/总量：{{ row.nowCount }}/{{ row.sendNum }}
            <br />
            期限：{{ row.couponStartDate }}-{{ row.couponEndDate }}
          </div>
        </div>
        <span slot="status" slot-scope="row">
          <span v-if="row.status==0">待审核</span>
          <span v-if="row.status==1">已通过</span>
          <span v-if="row.status==2">已拒绝</span>
          <span v-if="row.status==3">已终止</span>
          <span v-if="row.status==4">已过期</span>
        </span>
        <div slot="time" slot-scope="row">{{ row.startTime }}-{{ row.endTime }}</div>
        <span slot="commissionRate" slot-scope="row">{{ row.commissionRate }}%</span>
        <span slot="serviceRate" slot-scope="row">{{ row.serviceRate }}%</span>
        <div slot="action" slot-scope="row">
          <div v-if="row.status==0">
            <a @click="verifyGoods(row,1)">通过</a>
            <a-divider type="vertical" />
            <a @click="verifyGoods(row,2)">拒绝</a>
            <a-divider type="vertical" />
            <a @click="goodsTk(row.skuId)">查询佣金</a>
          </div>
          <div v-if="row.status==1">
            <a>已通过</a>
          </div>
          <div v-if="row.status==2">
            <a>已拒绝</a>
          </div>
        </div>
      </a-table>
    </a-card>
    <br />
    <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 30 }">

      <a-card class="card" title="活动列表" :bordered="false">
        <div slot="extra">
          <a-select
            style="width:200px"
            @change="getGroupList()"
            v-model="jdUserId"
          >
            <a-select-option
              v-for="(item, i) in jdUser"
              :key="i"
              :value="item.id"
            >{{ item.name }}</a-select-option>
          </a-select>
        </div>
        <a-table
          :columns="columns"
          :rowKey="groupList => groupList.activityId"
          :dataSource="groupList"
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
        >
          <span slot="activityStatus" slot-scope="activityStatus">
            <a-tag
              :color="activityStatus == 2 ?'green':'volcano'"
            >{{ activityStatus===2?'进行中':(activityStatus===5?'已结束':'不可用') }}</a-tag>
          </span>
          <span slot="action" slot-scope="activityId">
            <a @click="copyText(activityId.activityId)">复制报名链接</a>
          </span>

          <span slot="time" slot-scope="time">
            <span>
              起：{{ time.startTime }}
              <br />
              止：{{ time.endTime }}
            </span>
          </span>
        </a-table>
      </a-card>
    </a-skeleton>
  </div>
</template>

<script>
import { getGroupList, getGroupInfo } from '@/api/group'
import { goodsList, verifyGoods, goodsTk } from '@/api/detail'
const columns = [
  {
    title: '活动ID',
    dataIndex: 'activityId'
  },
  {
    title: '活动标题',
    dataIndex: 'title'
  },
  {
    title: '活动状态',
    dataIndex: 'activityStatus',
    scopedSlots: { customRender: 'activityStatus' }
  },
  {
    title: '活动时间',
    dataIndex: '',
    scopedSlots: { customRender: 'time' }
  },
  {
    title: '实时报名商品数',
    dataIndex: 'skuCnt'
  },
  {
    title: '引入订单数',
    dataIndex: 'orderCntIn'
  },
  {
    title: '预估服务费',
    dataIndex: 'ygServiceFee'
  },
  {
    title: '实际服务费',
    dataIndex: 'serviceFee'
  },
  {
    title: '操作',
    dataIndex: '',
    scopedSlots: { customRender: 'action' }
  }
]
const auditColumns = [
  {
    title: '商品信息',
    width: 300,
    scopedSlots: { customRender: 'detailInfo' }
  },
  {
    title: '优惠券',
    scopedSlots: { customRender: 'coupon' }
  },
  {
    title: '状态',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '参与时间',
    scopedSlots: { customRender: 'time' }
  },
  {
    title: '佣金比例',
    scopedSlots: { customRender: 'commissionRate' }
  },
  {
    title: '服务费比例',
    scopedSlots: { customRender: 'serviceRate' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'AuditDetail',
  data () {
    return {
      description: '输入活动ID , 商品SKU 或 店铺名称 查找商品后进行审核.',
      columns,
      pagination: {},
      loading: false,
      skeLoading: true,
      form: this.$form.createForm(this),
      groupList: [],
      auditColumns,
      autidDetailList: [],
      auditLoading: false,
      jdUserId: 0,
      jdUser: []
    }
  },
  created () {
    getGroupInfo({})
      .then(res => {
        this.skeLoading = false
        this.jdUser = res.result.user
        this.jdUserId = res.result.user[0].id
        this.getGroupList(20, 1)
      })
      .catch(() => {
        this.skeLoading = false
        console.log('null')
      })
  },
  methods: {
    verifyGoods (e, examineStatus) {
      verifyGoods({ activityId: e.activityId, examineStatus: examineStatus, skuId: e.skuId, adownerId: e.adownerId })
        .then(res => {
          if (res.code === 200) {
            this.$message.success(res.message)
            this.form.validateFields((err, values) => {
              if (!err) {
                this.getAutidDetailList(values)
              }
            })
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$message.error('网络链接错误')
        })
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.getAutidDetailList(values)
        }
      })
    },
    handleTableChange (pagination, filters, sorter) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.getGroupList(pagination.pageSize, pagination.current)
    },
    getGroupList (pageSize, page) {
      this.loading = true
      getGroupList({ pageSize: pageSize, page: page, jdUserId: this.jdUserId })
        .then(res => {
          const pagination = { ...this.pagination }
          this.groupList = res.result.result
          pagination.total = res.result.totalNum
          pagination.pageSize = 20
          this.loading = false
          this.pagination = pagination
        })
        .catch(() => {
          this.loading = false
          console.log('null')
        })
    },
    goodsTk (skuId) {
      goodsTk({ skuId: skuId })
        .then(res => {
          this.$message.success(res.result.wlCommissionRatio)
        })
        .catch(() => {
          this.$message.error('网络链接错误')
        })
    },
    copyText (actId) {
      this.$copyText('https://jtk-jzt.jd.com/jtk/#/orient-act-info?id=' + actId + '_7')
        .then(message => {
          // console.log('copy', message)
          this.$message.success('复制成功')
        })
        .catch(err => {
          // console.log('copy.err', err)
          this.$message.error('复制失败')
        })
    },
    getAutidDetailList (parameter) {
      this.auditLoading = true
      goodsList(parameter)
        .then(res => {
          this.autidDetailList = res.result
          this.auditLoading = false
        })
        .catch(() => {
          this.auditLoading = false
        })
    }
  }
}
</script>
<style>
.detail-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 16px;
  margin-bottom: 5px;
}
</style>
